<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>待付款</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="../css/index.css" />
		<link rel="stylesheet" type="text/css" href="../css/style.css" />
		<script src="../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/vant.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/ajax.js" type="text/javascript" charset="utf-8"></script>
		<script src="html5plus://ready"></script>
		<script src="../js/back.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			header {
				padding: 15px 20px 5px 20px;
				background-color: red;
				color: white;
				margin-top: 0px;
			}

			#order-id {
				padding: 10px 10px 0px 20px;
			}

			#id {
				margin-top: 10px;
			}
			#font-size{
				font-size: 15px;				
			}
			#min-txt{
				margin-top: 5px;
				text-align: center;
				font-size: 12px;
			}
			#hr-style{
				border: #C8C9CC 0.3px solid;
			}
			#hr-style2{				
				border: #C8C9CC 0.5px solid;
			}
			
		</style>
	</head>

	<body>
		<div id="app">
			<header>
				<van-row>
					<van-col span="4">
						<span @click="back"><返回</span>
					</van-col> 
					<van-col span="17">我的订单
					</van-col>
				</van-row>
			</header>
			<!--头部结束-->

			<section>
				<van-row id="order-id"  v-for="(lis,index) in list" v-if="show"><!-- 单个商品订单开始 -->
					<!-- 订单编号样式 -->
					<van-col span="18">订单编号</van-col>
					<van-col span="6" style="color: red;">{{lis.StatusName}}</van-col>
					<van-col span="24" id="id">{{lis.Code}}</van-col>				
					<van-col span="24" >
						<van-card						
							v-bind:price=lis.GoodsList[0].GoodsPrice
							v-bind:title=lis.GoodsList[0].Name											
							v-bind:thumb= lis.GoodsList[0].GoodsImageUrl
							id="font-size"							
							>
							<img v-bind:src="lis.GoodsList[0].GoodsImageUrl" 
							onerror="javascript:this.src='../img/product_default.jpg';onerror=null; "  
							slot="thumb">
							<div slot="footer">
								<van-button size="small" round type="danger">支付</van-button>
								<van-button size="small" round @click="deleteorder(lis.Id)">删除订单</van-button>
							</div>
						</van-card>
						
					</van-col>
					<van-col span="24" id="min-txt">七天无理由退货退款，放心购<hr id="hr-style"/></van-col>

					
				</van-row><!-- 单个商品订单结束 -->						
			</section>
		</div>
		<script type="text/javascript">
			var vm = new Vue({
				el: "#app",
				data: {					
					list:[]	,
					show:true					
				},
				mounted(){					
						var key = localStorage.getItem("keys");						
						ajax({
							type:"post",
							url:"http://dsapi.ysd3g.com/api/MyOrderList",
							data:{
								key:key
							},
							dataType:"jsonp",
							success:function(res){
								if(res.Error==false){									
									var _this=this;
									for(var i=0;i<res.Data.length;i++){														
										if(res.Data[i].StatusName=="未支付"){
											_this.show=true		//true显示
										}else{
											_this.show=false			//false不显示
										}
									}									
									console.log(res)
									vm.list=res.Data;
									console.log(res.Data);									
								}else{
									console.log(res)
									//this.$toast(res.Msg);
								}
								// 商品列表								
							}
						})				
					
				},
				methods:{
					back(){
						var arr=plus.webview.currentWebview().close(arr);						
					},
					deleteorder(i){				//点击删除按钮
						vm.$dialog.confirm({							
							message: '请君三思，真的删除吗？'
						}).then(() => {						  						
						  ajax({
						  	url:"http://dsapi.ysd3g.com/api/DeleteOrder",
						  	data:{
						  		key:localStorage.getItem("keys"),
						  		oId:i
						  	},
						  	dataType:"jsonp",
						  	success:function(res){
						  		if(res.Error==false){
						  			var arr=vm.$toast.success("删除订单成功");						  			
									setTimeout(()=>{
										arr;
										plus.webview.currentWebview().reload();
									},400)
						  		}else{
										vm.$toast.fail(res.Msg);
									}
								}
							})
						}).catch(() => {
							vm.$toast("取消删除");
						});					
					}
				}
			})
		</script>
		
	</body>

</html>

